<template>
  <div class="discover-music">
    <Banner :is-flag="store.isFlag" @setPcLoading="setPcLoading" />
    <div v-if="!pcLoading">
      <div class="discover-music--content  w-full  h-full -mt-1 mx-auto">
        <page-list-layout>
          <!-- 热门推荐 -->
          <template v-slot:one>
            <PopularRecommend></PopularRecommend>
          </template>
          <!-- 个性化推荐 -->
          <template v-slot:two>
            <recommendation v-if="store.token"/>
          </template>
          <!-- 新碟上架 -->
          <template v-slot:three>
            <new-disc/>
          </template>
          <!-- 榜单 -->
          <template v-slot:four>
            <monthly-focus/>
          </template>
          <!-- 首页侧边登录按钮信息 -->
          <template v-slot:top>
            <right-user-info />
          </template>
          <!-- 入驻歌手 -->
          <template v-slot:center>
            <in-singer />
          </template>
          <!-- 热门主播 -->
          <template v-slot:bottom>
            <popular-anchor/>
          </template>
        </page-list-layout>
      </div>
    </div>
    <loading v-else/>
  </div>
</template>

<script setup>
import {ref} from "vue";

// piain
import {useStore} from '@/store/index'
// 轮播图
import Banner from './components/Banner/index.vue'
import PopularRecommend from './components/PopularRecommend/index.vue'
import PageListLayout from '@/components/PageListLayout/index.vue'
// pc右侧信息
import RightUserInfo from '@/components/RightUserInfo/index.vue'
// 个性化推荐
import Recommendation from './components/Recommendation/index.vue'
// 新碟上架
import NewDisc from './components/NewDisc/index.vue'
// 榜单
import MonthlyFocus from './components/MonthlyFocus/index.vue'
// 入驻歌手
import InSinger from './components/InSinger/index.vue'
// 热门主播
import PopularAnchor from './components/PopularAnchor/index.vue'

const pcLoading = ref(true)
// pinia数据
const store = useStore()

// banner设置loading状态
const setPcLoading = (flag) => {
  pcLoading.value = flag
}
</script>

<style lang="scss" scoped>

</style>
